<template>
    <div>
        <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in" appear>
                <component :is="Component" />
            </transition>
        </router-view>
        <Tabbar v-model="curIndex" color="#FF5252" :list="list" @onClick="onClick" />
    </div>
</template>

<script setup>
import useLanguage from '@/hooks/useLanguage';
import Tabbar from "@/components/Tabbar/index.vue";
import { ref } from 'vue';
import { storeToRefs } from 'pinia'
import { UserStore } from '@/store/user';
// 路由
import { useRouter, useRoute } from 'vue-router'


const { t, toggleLocale } = useLanguage()


const router = useRouter()
const route = useRoute()
const userStore = UserStore()
const { user, curIndex } = storeToRefs(userStore)





const list = [
    {
        name: t('Home'),
        path: '/',
        icon: new URL('../../assets/tabbar/index.png', import.meta.url).href,
        activeIcon: new URL('../../assets/tabbar/index-active.png', import.meta.url).href,
    },
    {
        name: t('Self'),
        path: '/self',
        icon: new URL('../../assets/tabbar/self.png', import.meta.url).href,
        activeIcon: new URL('../../assets/tabbar/self-active.png', import.meta.url).href,
    },
    {
        name: t('Market'),
        path: '/market',
        icon: new URL('../../assets/tabbar/market.png', import.meta.url).href,
        activeIcon: new URL('../../assets/tabbar/market-active.png', import.meta.url).href,
    },
    {
        name: t('News'),
        path: '/news',
        icon: new URL('../../assets/tabbar/news.png', import.meta.url).href,
        activeIcon: new URL('../../assets/tabbar/news-active.png', import.meta.url).href,
    },
    {
        name: t('Mine'),
        path: '/mine',
        icon: new URL('../../assets/tabbar/mine.png', import.meta.url).href,
        activeIcon: new URL('../../assets/tabbar/mine-active.png', import.meta.url).href,
    },
]

function onClick(index) {
    router.push(list[index].path)
}




</script>

<style lang="less" scoped>
.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

</style>